import React, {Component} from 'react'

class ToDoList extends Component {
    constructor(props) {
        super(props)
    }

    filter = () => {
        return (
            this.props.list.map(item => {
                if (this.props.filter === 'completed' && item.status) {
                    return <li key={item.content} style={{ textDecoration: item.status ? 'line-through' : '' }} onClick={() => {this.props.handleItemClick(item)}}>{item.content}</li>
                }
                if (this.props.filter === 'uncompleted' && !item.status) {
                    return <li key={item.content} style={{ textDecoration: item.status ? 'line-through' : '' }} onClick={() => {this.props.handleItemClick(item)}}>{item.content}</li>
                }
                if (this.props.filter === 'all') {
                    return <li key={item.content} style={{ textDecoration: item.status ? 'line-through' : '' }} onClick={() => {this.props.handleItemClick(item)}}>{item.content}</li>
                }
            })
        )
    }

    render() {
        return (
            <ul>
                {this.filter()}
            </ul>
        )
    }
}


export default ToDoList